$sidebar : 52px;
/*各模块位置的变换*/
@mixin sidebar-item($pos1,$pos2){
  background-position:0 $pos1;
  &:hover{
    background-position:0 $pos2;
  }
}


/*侧边栏容器*/
.sidebar{
  position:fixed;
  right: 10%;
  bottom:5px;
  margin-right:-$sidebar / 2;
}

/*统一引入背景图片*/
.sidebar-item,.sidebar-layer{
  background:url('../images/sidebar.png') no-repeat;
}

/*公共样式*/
.sidebar-item{
  position:relative;
  display:block;
  width:$sidebar;
  height:$sidebar;
  margin-top:1px;
  @include transition (background-opsition 1s);
  &:hover{
    .sidebar-layer{
      @include opacity(1);
      @include transform (1);
    }
  }
}

/*微信公众号样式*/
.side-item-weixin{
  @include sidebar-item(-798px,-860px);
  .sidebar-layer{
    height: 212px;
    background-position: 0 0;
  }
}

/*意见反馈样式*/
.side-item-feedback{
  @include sidebar-item(-426px,-488px);
}

/*APP下载样式*/
.side-item-app{
  @include sidebar-item(-550px,-612px);
  .sidebar-layer{
    height: 194px;
    background-position: 0 -222px;
  }
}

/*返回顶部样式*/
.side-item-top {
  @include sidebar-item(-674px,-736px);
}

/*二维码样式*/
.sidebar-layer{
  position: absolute;
  width:172px;
  right:$sidebar - 6;
  bottom: -10px;
  @include opacity(0);
  @include transform-origin (95% 95%);
  @include transform (0.01);
  @include transition (all 1s);
}